<template>
  <div class="container">
    <Sidebar></Sidebar>
    <div class="box">
      <el-container style="border: 1px solid #eee">
        <el-aside width="250px" style="border: 1px solid #eee" class="aside">
          <div class="title-one">云音乐特色榜</div>
          <div>
            <section
              v-for="(list, index) in lists"
              :key="index"
              :class="{ addBackground: colorIndex === index }"
              @click="addBackground(list.name, index)"
            >
              <span v-show="index < 4" class="one-span">{{ list.name }}</span>
              <!-- <span v-show="index < 4" > {{list.updateFrequency}} </span> -->
            </section>
          </div>

          <div class="title-two">全球媒体榜</div>
          <div>
            <section
              v-for="(list, index) in lists"
              :key="index"
              :class="{ addBackground: colorIndex === index }"
              @click="addBackground(list.name, index)"
            >
              <span v-show="index >= 4" class="two-span">{{ list.name }}</span>
              <!-- <span v-show="index >= 4" > {{list.updateFrequency}} </span> -->
            </section>
          </div>
        </el-aside>

        <el-container>
          <el-header style="text-align: left; font-size: 12px">
            <div class="header">
              <img :src="coverImgUrl" alt="" class="img" />

              <div class="header-right">
                <div class="header-title">{{ title }}</div>
                <p class="updata">
                  <i class="el-icon-time"></i>最近更新:{{ updateFrequency }}
                </p>
                <div class="btn">
                  <button class="btn1">
                    <i class="el-icon-video-play"></i> 播放
                  </button>
                  <button class="btn2">
                    <i class="el-icon-folder-add"></i> ({{ subscribedCount }})
                  </button>
                  <button class="btn3">
                    <i class="el-icon-position"></i> ({{ share }})
                  </button>
                  <button class="btn4">
                    <i class="el-icon-download"></i> ({{ download }})
                  </button>
                  <button class="btn5">
                    <i class="el-icon-chat-line-square"></i> ({{ comment }})
                  </button>
                </div>
              </div>
            </div>
          </el-header>

          <el-main>
            <div class="main-first">
              <div class="main-header">歌曲列表 <i class="num">{{trackCount}}首歌</i></div>
              <div class="small">
                播放：<i class="count">{{ playCount }}</i>次
              </div>
            </div>
            <!-- <div class="main">
              <table>
                <thead>
                  <th>
                    <td>  </td>
                    <td>标题</td>
                    <td>时长</td>
                    <td>歌手</td>
                  </th>
                </thead>
                <tbody>
                  <th v-for="(track,track_index) in tracks" :key="track_index">
                    <td></td>
                  </th>
                </tbody>
              </table>
            </div> -->
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import Sidebar from "@/components/Sidebar";
import { reqList } from "@/api";
export default {
  name: "list",
  data() {
    return {
      //请求到的所有数据
      lists: [],
      //是否被选中
      colorIndex: 0,
      //index
      index: "",
      //用来接收选中的当标题
      title: "飙升榜",
      //标题中的图片
      coverImgUrl:
        "https://p2.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg",
      //更新时间
      updateFrequency: "刚刚更新",
      //订阅次数
      subscribedCount: "413345",
      share: "16585",
      download: "545154",
      comment: "646551",
      //播放次数
      playCount:'5619569152',
      //总共有几首歌
      trackCount:'100',
      //
      tracks:[],

      
    };
  },
  components: {
    Sidebar,
  },
  mounted() {
    this.getList();
  },
  methods: {
    //请求数据
    async getList() {
      await reqList()
        .then((res) => {
          // console.log("是我呀");
          // console.log(res.data.list);
          this.lists = res.data.list;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //侧边栏的选中
    addBackground(name, index) {
      // console.log(this.lists[index].updateFrequency);
      //添加点击背景颜色
      this.colorIndex = index;
      //获取点击的文字
      this.title = name;
      //获取index
      this.index = index;
      //获取点击相对应的图片
      this.coverImgUrl = this.lists[index].coverImgUrl;
      //更新
      this.updateFrequency = this.lists[this.index].updateFrequency;
      //播放次数
      this.playCount = this.lists[this.index].playCount
      //总共有几首歌
      this.trackCount = this.lists[this.index].trackCount
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  .box {
    margin: 0em 12em;
    .aside {
      padding: 2em;
      background: #fbf9f9;
      .title-one {
        font-size: 1.4em;
        padding-bottom: 0.7em;
        border-bottom: 1px solid #eee;
      }
      .title-two {
        font-size: 1.4em;
        margin-top: 1.2em;
        padding-bottom: 0.7em;
        border-bottom: 1px solid #eee;
      }
      .one-span {
        font-size: 1.1em;
        margin-top: 0.8em;
      }
      .two-span {
        font-size: 1.1em;
        margin-top: 0.8em;
      }
    }
    span {
      width: 190px;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    span:hover {
      color: rgb(206, 5, 5);
    }
    .addBackground {
      padding-left: 1em;
      border-radius: 2em;
      background: rgb(206, 5, 5);
      color: white;
      pointer-events: none;
    }
  }
  .header {
    display: flex;
    margin-top: 3em;
    margin-left: 2em;

    .img {
      width: 15em;
      border-radius: 1em;
    }

    .header-right {
      margin-left: 2em;
      .header-title {
        font-size: 2em;
        margin-top: 1.9em;
      }
      .updata {
        margin-bottom: 2.6em;
        font-size: 1em;
        color: rgb(106, 103, 103);
      }

      .btn {
        .btn1 {
          margin-top: 0.5em;
          width: 6em;
          height: 2em;
          // background: blue;
        }

        .btn2 {
          margin-left: 0.5em;
          // width: 5em;
          height: 2em;
        }
        .btn3 {
          margin-left: 0.5em;
          // width: 5em;
          height: 2em;
        }
        .btn4 {
          margin-left: 0.5em;
          // width: 5em;
          height: 2em;
        }
        .btn5 {
          margin-left: 0.5em;
          // width: 5em;
          height: 2em;
        }
      }
      button :hover {
        background-color: red;
      }
    }
  }
  .main-first {
    margin-top: 11em;
    margin-left: 2em;
    margin-right: 2em;
    display: flex;
    justify-content: space-between;
    .main-header {
      font-size: 1.5em;
      .num {
        color: rgb(106, 103, 103);
        margin-left: 0.7em;
        font-size: 0.6em;
      }
    }
    .small {
      color: rgb(106, 103, 103);
      .count {
        color: rgb(206, 5, 5);
      }
    }
  }
  .main {
    border-top:rgb(206, 5, 5) solid 1.5px ;
    border: #eee solid 1px;
  }
}
</style>